<template>
  <view class="profile-container">
    <!-- 头部区域 -->
    <view class="header">
      <text class="title">个人信息</text>
    </view>

    <!-- 信息列表 -->
    <view class="info-list">
      <view class="info-item">
        <text class="label">用户ID</text>
        <text class="value">{{ userInfo.id }}</text>
      </view>

      <view class="info-item">
        <text class="label">用户名</text>
        <text class="value">{{ userInfo.username || '未设置' }}</text>
      </view>

      <view class="info-item">
        <text class="label">性别</text>
        <text class="value">{{ getGenderText(userInfo.gender) }}</text>
      </view>

      <view class="info-item">
        <text class="label">手机号</text>
        <text class="value">{{ userInfo.phone || '未设置' }}</text>
      </view>

      <view class="info-item">
        <text class="label">学校</text>
        <text class="value">{{ userInfo.school || '未设置' }}</text>
      </view>

      <view class="info-item">
        <text class="label">专业</text>
        <text class="value">{{ userInfo.zhuanye || '未设置' }}</text>
      </view>

      <view class="info-item">
        <text class="label">地区</text>
        <text class="value">{{ getLocationText() }}</text>
      </view>

      <view class="info-item">
        <text class="label">微信号</text>
        <text class="value">{{ userInfo.wechat || '未设置' }}</text>
      </view>
    </view>

    <!-- 修改按钮 -->
    <button class="edit-button" @tap="handleEdit">修改信息</button>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { queryUserInfoById } from '@/api/userinform'

interface UserInfo {
  id: number
  userId: number
  username: string | null
  gender: number
  school: string | null
  zhuanye: string | null
  phone: string | null
  unionid: string | null
  country: string | null
  province: string | null
  city: string | null
  language: string | null
  wechat: string | null
}

export default defineComponent({
  name: 'UserProfile',

  data() {
    return {
      userInfo: {
        id: 0,
        userId: 0,
        username: '',
        gender: 0,
        school: '',
        zhuanye: '',
        phone: '',
        unionid: '',
        country: '',
        province: '',
        city: '',
        language: '',
        wechat: '',
      } as UserInfo,
      loading: false,
    }
  },

  methods: {
    getGenderText(gender: number): string {
      switch (gender) {
        case 1:
          return '男'
        case 2:
          return '女'
        default:
          return '未知'
      }
    },

    getLocationText(): string {
      const { country, province, city } = this.userInfo
      if (!country && !province && !city) return '未设置'
      return [country, province, city].filter(Boolean).join(' ')
    },

    async loadUserInfo() {
      this.loading = true
      try {
        // 从本地存储获取用户信息
        const localUserInfo = uni.getStorageSync('userInfo')
        console.log('本地存储的用户信息:', localUserInfo)

        if (!localUserInfo) {
          throw new Error('未找到用户信息')
        }

        // 解析本地存储的用户信息
        const localUserData =
          typeof localUserInfo === 'string' ? JSON.parse(localUserInfo) : localUserInfo

        // 调用API获取详细信息
        const res = await queryUserInfoById(localUserData.id)
        console.log('API返回的用户信息:', res)

        if (res.statusCode === 200 && res.data) {
          const responseData = res.data as any
          console.log('解析后的响应数据:', responseData)

          if (responseData.code === 200 && responseData.data) {
            // 合并API返回的数据和本地数据
            this.userInfo = {
              ...responseData.data,
              id: localUserData.id || responseData.data.id,
              username: responseData.data.username || localUserData.username || '未设置',
            }
            console.log('最终的用户信息:', this.userInfo)
          } else {
            console.error('API返回错误:', responseData)
            // 如果API调用失败，至少显示本地存储的基本信息
            this.userInfo = {
              ...this.userInfo,
              id: localUserData.id,
              username: localUserData.username || '未设置',
            }
          }
        }
      } catch (error) {
        console.error('加载用户信息失败:', error)
        uni.showToast({
          title: '加载用户信息失败',
          icon: 'none',
        })
      } finally {
        this.loading = false
      }
    },

    handleEdit() {
      // 修改按钮点击处理函数，暂时为空
      console.log('点击了修改按钮')
    },
  },

  onLoad() {
    this.loadUserInfo()
  },

  onShow() {
    // 每次显示页面时重新加载数据
    this.loadUserInfo()
  },
})
</script>

<style lang="scss">
.profile-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;

  .header {
    background: linear-gradient(180deg, #9370db 0%, #e6e6fa 100%);
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .info-list {
    background-color: #ffffff;
    padding: 0 30rpx;
    margin: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 28rpx;
        color: #666666;
      }

      .value {
        font-size: 28rpx;
        color: #333333;
        max-width: 70%;
        text-align: right;
      }
    }
  }

  .edit-button {
    width: 90%;
    height: 88rpx;
    line-height: 88rpx;
    background: #9370db;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 40rpx auto;
    text-align: center;

    &:active {
      opacity: 0.8;
    }

    &::after {
      border: none;
    }
  }
}
</style>
